import React from "react";
import styles from '@/assets/css/order_info.module.css';
import type business from "@/types/business";
import type order from "@/types/order";

interface guestList {
  busid: number;
  deletetime?: number;
  gender: string;
  gender_text: string;
  id: number;
  mobile: string;
  nickname: string;
}

const OrderInfo = () => {
  const [business] = useState<business>(React.business);
  const [guest, SetGuest] = useState<guestList[]>([]);
  const [info, SetInfo] = useState<order>({} as order);
  const [searchParams] = useSearchParams();
  const [orderid] = useState<string | number>(searchParams.get('orderid') ?? '');
  // 评论内容
  const [content, SetContent] = useState<string>("");
  const [rate, setRate] = useState<number>(1);

  // 获取订单详情数据
  const fetchData = async () => {
    // 组装参数
    const params = {
      busid: business.id,
      orderid
    };
    // 发起请求
    const result = await React.Http.post('/order/info', params);
    // 处理请求结果
    if (result.code === 1) {
      // 赋值
      SetGuest(result.data.guest);
      SetInfo(result.data.order);
    } else {
      React.fail(result.msg);
    }
  }

  // 挂载前 获取数据
  useEffect(() => {
    fetchData();
  }, [orderid]);

  // 回显评论数据 
  const CommentView = () => {
    // 已评价
    if (info.status == '4') {
      return (
        <div className={styles.info_footer}>
          <div className={styles.content_title}>评价信息：</div>
          <div className={styles.comment}>
            <React.UI.Rate defaultValue={info.rate} readOnly />

            <React.UI.Divider
              style={{
                color: '#1677ff',
                borderColor: '#1677ff',
                borderStyle: 'dashed',
              }}
            ></React.UI.Divider>

            <React.UI.TextArea className='textarea' defaultValue={info.comment} readOnly />
          </div>
        </div>
      )
    }
    else if (info.status == '3') {
      return (
        <>
          <React.UI.TextArea className={styles.textarea} placeholder="请输入评论内容" value={content} onChange={(val: string) => SetContent(val)} autoSize={{ minRows: 3, maxRows: 5 }} />
          <React.UI.Rate allowClear={false} defaultValue={rate} onClick={(val: number) => setRate(val)} />

          <React.UI.Button style={{ width: '100%' }} onClick={comment} color='primary'>提交评价</React.UI.Button>
        </>
      )
    } else {
      return (<></>)
    }
  }

  // 提交评论
  const comment = async () => {
    if (!content) {
      React.fail('请填写评论');
      return;
    }
    // 组装参数
    const params = {
      busid: business.id,
      orderid,
      content,
      rate
    };
    // 发起请求
    const result = await React.Http.post('/order/comment', params);
    if (result.code === 1) {
      React.success(result.msg, () => {
        SetInfo(result.data);
      });
    } else {
      React.fail(result.msg);
    }
  }

  return (
    <>
      <div className={styles.order_info}>
        <div className={styles.info_content}>
          <div className={styles.content_title}>订单信息：</div>
          <div className={styles.content_item}>
            <p>入住时间:</p>
            <div>{info.starttime_text} {info.startday_text} - {info.endtime_text} {info.endday_text}</div>
          </div>
          <div className={styles.content_item}>
            <p>订单状态:</p>
            <div> {info.status_text} </div>
          </div>
          <div className={styles.content_item}>
            <p>入住天数:</p>
            <div>共 {info.order_day} 晚</div>
          </div>
          <div className={styles.content_item}>
            <p>订单价格:</p>
            <div className={styles.content_price}>￥{info.price}</div>
          </div>
          <div className={styles.content_item}>
            <p>房间单价:</p>
            <div className={styles.content_price}>￥{info?.room?.price}</div>
          </div>
          <div className={styles.content_item}>
            <p>支付方式:</p>
            <div>{info.type_text}</div>
          </div>
          <div className={styles.content_item}>
            <p>入住人数:</p>
            <div>{guest.length} 人</div>
          </div>
          <div className={styles.content_item}>
            <p>订单备注:</p>
            <div>{info.remark ? info.remark : '无备注'}</div>
          </div>
        </div>
        {/* 房间信息 */}
        <div className={styles.info_footer}>
          <div className={styles.content_title}>房屋信息：</div>
          <div className={styles.detail}>
            <div className={styles.thumb}>
              <img src={info?.room?.thumb_text} alt="" />
            </div>
            <div className={styles.right}>
              <p>{info?.room?.name}</p>
              <div className={styles.tips}>
                {info?.room?.flag && JSON.parse(info.room.flag).map((val: string, index: number) => (
                  <React.UI.Tag color='primary' key={index}>{val}</React.UI.Tag>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 入住信息 */}
        <div className={styles.info_footer}>
          <div className={styles.content_title}>住客信息：</div>
          <div className={styles.detail}>
            <React.UI.List className={styles.list}>
              {guest.map((item: guestList) => (
                <React.UI.List.Item
                  key={item.nickname}
                  description={`手机号码：${item.mobile}`}
                >
                  {item.nickname}({item.gender_text})
                </React.UI.List.Item>
              ))}
            </React.UI.List>
          </div>
        </div>

        {/* 评价信息 */}
        <CommentView />
      </div>
    </>
  )
}

export default OrderInfo;